<template>
  <div class="safety-check">
    <iu-header>
      <template #left>
        <x-icon
          @click="backToHomepage"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
        <span class="back-text">安全检查</span>
      </template>
      <template #title>
        <div class="fixed_dep_box">
          <div class="btn_box">
            <div
              class="department_select"
              :class="showTree ? 'active' : ''"
              @click="showTreeFn(true)"
            >
              <p class="department_name">
                {{ curDepartment.departmentName }}
              </p>
              <iconSvg
                name="downFill"
                w="23px"
                height="13px"
                class="selece_icon"
                ref="selece_icon"
              ></iconSvg>
            </div>
            <transition name="slide">
              <div class="dep_box" v-show="showTree">
                <dep-tree
                  ref="depTree"
                  @changeId="change"
                  @showTreeFn="showTreeFn"
                  @initCurDepartment="initCurDepartment"
                  :initDepartment="curDepartment"
                ></dep-tree>
              </div>
            </transition>
          </div>
        </div>
      </template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="safety-check-work">
      <div class="list-area">
        <div class="list-card">
          <div class="tab-nav">
            <div
              class="tab-nav-item"
              :class="{ active: active == item.key }"
              v-for="(item, index) in tabNav"
              :key="index"
              @click="eventActive(item)"
            >
              <span>{{ checkNum[item.value] }}</span>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="showPie-list">
          <chart-list :chart-list="chartList"></chart-list>
      </div> -->
      <div class="showPie-list">
        <div class="showPie">
          <div
            style="
              color: #fff;
              font-size: 16px;
              margin-left: 16px;
              margin-top: 6px;
            "
          >
            风险等级统计
          </div>
          <div
            ref="checkStandardItemCharts"
            style="width: 100%; height: 260px"
          ></div>
          <div class="chart_empty" v-if="!checkStandardItemData.length">
            <img src="/static/img/chart_empty.png" />
            <p>暂无相关数据</p>
          </div>

        </div>
      </div>
      <div class="showPie-list">
        <div class="showPie">
          <div
            style="
              color: #fff;
              font-size: 16px;
              margin-left: 16px;
              margin-top: 6px;
            "
          >
            隐患统计
          </div>
          <div
            ref="checkTroubleCharts"
            style="width: 100%; height: 260px"
          ></div>
          <div class="chart_empty" v-if="!checkTroubleData.length">
            <img src="/static/img/chart_empty.png" />
            <p>暂无相关数据</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem } from "vux";
import SafetyManageDao from "@/daos/safety_manage_dao";
import iuHeader from "@/components/common/header/index";
import depTree from "@/components/common/tree";

import ChartList from "@/components/common/chart_list/index";
import DataAnalysisDao from "@/daos/data_analysis_dao";

export default {
  name: "safetyRisks",
  components: {
    Tab,
    TabItem,
    iuHeader,
    ChartList,
    depTree
  },
  data() {
    return {
      statusIndex: 1,
      risksIndex: 1,
      active: 1,
      showMore: false,
      showTree: false,
      chartList:[],
      checkTroubleEle: null,
      checkTroubleData: [],
      checkStandardItemEle: null,
      checkStandardItemData: [],
      checkSecurityRecordEle: null,
      checkSecurityRecordData: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      checkNum: {
        checkSecurityRecordNum: 0,
        checkStandardItemNum: 0,
        checkTroubleNum: 0
      },
      curDepartment: {
        departmentName: "全企业",
        id: ""
      },
      tabNav: [
        {
          key: "inspectionPlan",
          value: "checkSecurityRecordNum",
          name: "检查计划"
        },
        {
          key: "risksControl",
          value: "checkStandardItemNum",
          name: "风险管控"
        },
        {
          key: "safetyRisks",
          value: "checkTroubleNum",
          name: "隐患整改",
          num: 0
        }
      ],
      store: {
        id: 0
      },
      pieOption: {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "4%",
          textStyle: { color: "#fff" }
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    };
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  activated() {
    // this.init();
    this.$router.replace('/safetycheck/inspectionPlan')
  },
  created() {
    if (this.user) {
      this.curDepartment = {
        departmentName: this.user.serviceAreaTree.departmentName,
        id: this.user.serviceAreaTree.id
      };
    }
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    troubleTotal() {
      return this.tabNav.reduce((a, b) => a + b.num, 0);
    },
    troubleMyTotal() {
      return this.tabMyNav.reduce((a, b) => a + b.num, 0);
    },
    troubleMyBadge() {
      return this.tabMyNav.slice(0, 2).reduce((a, b) => a + b.num, 0);
    }
  },
  methods: {
    init() {
      if (!this.user) {
        this.getUserInfo();
      } else {
        this.getTypeNum();
        this.getCheckTroubleNumCharts();
        this.getCheckStandardItemNumCharts();
        this.getCheckSecurityRecordNumCharts();
        // this.getChartConfig()
      }
    },
    getUserInfo() {
      this.$http(this.$API.getUserInfo, {}).then(res => {
        this.$store.commit("saveUser", res);
        this.curDepartment = {
          departmentName: res.serviceAreaTree.departmentName,
          id: res.serviceAreaTree.id
        };
        localStorage.setItem(
          "safetyCheckDep",
          JSON.stringify(this.curDepartment)
        );
        this.init();
      });
    },
    getChartConfig() {
      let params = {
        code: "AQJC01",
        departmentId: this.curDepartment.id
      };
      DataAnalysisDao.getChartConfig(params, res => {
        this.chartList.splice(0);
        if (res && res.length) {
          this.chartList = res.map(e => {
            e.show = 0;
            e.code = "AQJC01";
            return e;
          });
        }
      });
    },
    handler(e) {
      this.pageNum = 1;
      this.pageSize = 10;

      this.statusIndex = e;
    },
    eventActive(item) {
      this.showMore = false;
      this.isDisableTab = false;
      this.checkSecondTabIndex = item.key;
      this.showOverdueIndex = undefined;
      this.$router.push({
        name: item.key
      });
    },
    eventRisksTabChange(e) {
      this.pageNum = 1;
      this.pageSize = 10;

      this.risksIndex = e;
    },
    showTreeFn(status) {
      if (status) {
        this.$refs.selece_icon.$el.style.transform = "rotate(-180deg)";
      } else {
        this.$refs.selece_icon.$el.style.transform = "rotate(0deg)";
      }
      this.showTree = status;
    },
    initCurDepartment(id, departmentName) {
      // console.log(id, name);
      // this.curDepartment = {
      //   departmentName,
      //   id
      // };
    },
    change(id, departmentName) {
      this.curDepartment = {
        departmentName,
        id
      };
      this.init();
    },
    getCertificateMore() {
      this.pageNum++;
      this.getCertificateList();
    },
    getTypeNum() {
      let params = {
        // orgId: this.user.org.id,
        departmentId: this.curDepartment.id
      };
      SafetyManageDao.getTypeNum(params, res => {
        if (res) {
          Object.assign(this.checkNum, res);
        }
      });
    },
    getCheckTroubleNumCharts() {
      let params = {
        // orgId: this.user.org.id,
        departmentId: this.curDepartment.id
      };
      SafetyManageDao.getCheckTroubleNumCharts(params, res => {
        this.checkTroubleData.splice(0);
        if (res) {
          let data = [
            { value: 0, name: "一般", itemStyle: { color: "#e47546" } },
            { value: 0, name: "重大", itemStyle: { color: "#e54c5e" } }
          ];
          data.forEach(ele => {
            res.forEach(e => {
              if (e.troubleLevel.includes(ele.name)) {
                ele.value += +e.num;
              }
            });
          });
          this.checkTroubleData = data.filter(e => e.value);
        }
        this.setPieCharts("checkTrouble", this.checkTroubleData);
      });
    },
    getCheckStandardItemNumCharts() {
      let params = {
        // orgId: this.user.org.id,
        departmentId: this.curDepartment.id
      };
      SafetyManageDao.getCheckStandardItemNumCharts(params, res => {
        this.checkStandardItemData.splice(0);
        if (res) {
          // this.checkStandardItemData = res;

          let data = [
            {
              value: 0,
              name: "较低",
              riskRank: 1,
              itemStyle: { color: "#76bed8" }
            },
            {
              value: 0,
              name: "一般",
              riskRank: 2,
              itemStyle: { color: "#e5cf65" }
            },
            {
              value: 0,
              name: "较大",
              riskRank: 3,
              itemStyle: { color: "#e47546" }
            },
            {
              value: 0,
              name: "重大",
              riskRank: 4,
              itemStyle: { color: "#e54c5e" }
            }
          ];
          data.forEach(ele => {
            res.forEach(e => {
              if (ele.riskRank === e.riskRank) {
                ele.value += +e.num;
              }
            });
          });
          this.checkStandardItemData = data.filter(e => e.value);
        }
        this.setPieCharts("checkStandardItem", this.checkStandardItemData);
      });
    },
    getCheckSecurityRecordNumCharts() {
      let params = {
        // orgId: this.user.org.id,
        departmentId: this.curDepartment.id
      };
      SafetyManageDao.getCheckSecurityRecordNumCharts(params, res => {
        this.checkSecurityRecordData.splice(0);
        if (res) {
          this.checkSecurityRecordData = res;
        }
      });
    },
    setPieCharts(target, data) {
      try {
        if (!this[`${target}Ele`]) {
          this[`${target}Ele`] = this.$echarts.init(
            this.$refs[`${target}Charts`]
          );
          this[`${target}Ele`].setOption(this.pieOption);
        }
      } catch (error) {
        console.log(error);
      }
      let option = this[`${target}Ele`].getOption();

      if (!data.length) {
        option.graphic = [
          {
            type: "text",
            left: "center",
            top: "40%",
            style: {
              text: "",
              fill: "#fff",
              fontSize: 18
            }
          }
        ];
        this[`${target}Ele`].setOption(option);
      } else {
        option.graphic = [];
        this[`${target}Ele`].setOption(option, true);
      }
      this[`${target}Ele`].setOption({
        series: [
          {
            data
          }
        ]
      });
    },
    eventCheckList(tag) {
      this.$router.push({
        name: "safetyCheckList",
        query: {
          tag
        }
      });
    },
    eventCheckResultList({ id, status }) {
      this.$router.push({
        name: "safetyCheckResultList",
        query: {
          id,
          status
        }
      });
    },
    eventRisksList(status = 1, tag = 1) {
      this.$router.push({
        name: "safetyRisks",
        query: {
          status,
          tag
        }
      });
    },
    eventRisksDetail({ id }) {
      this.$router.push({
        name: "safetyRisksDetail",
        query: {
          id
        }
      });
    }
  }
};
</script>
<style lang="less">
.safety-check-tab {
  .vux-tab {
    height: 45px !important;
    background: #1b1c32;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
  .badge-area {
    position: relative;
  }
  .iu-badge {
    position: absolute;
    top: -8px;
    right: -14px;
  }
  .iu-badge {
    background-color: #f74c31;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    height: 12px;
    line-height: 12px;
    padding: 0px 4px;
    text-align: center;
    white-space: nowrap;
  }
}
</style>
<style lang="less" scoped>
.safety-check {
  height: 100vh;
  background: #18182c;
  overflow-y: scroll;

  .showPie-list {
    padding: 8px;
  }
  .showPie {
    margin: 0 auto;
    padding: 8px 0;
    width: 100%;
    // background-color: #18182c;
    background-color: #292a4d;
    position: relative;
    &.show {
      height: auto;
    }

    .chart_empty {
      position: absolute;
      display: block;
      width: 84px;
      bottom: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 100%;
      }
      p {
        text-align: center;
        color: #9ec6fb;
        font-size: 13px;
      }
    }
    .show-title {
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      padding: 0 16px;
      .show-btn {
        color: #fff;
        font-size: 12px;
        display: flex;
        align-items: center;
      }
    }
  }
}
.urgent-priority,
.early-type-err {
  color: red;
}
.vital-priority,
.early-type-warning {
  color: #d98806;
}

.list-area {
  padding: 8px;
  .list-card {
    background-color: #22233f;
    padding: 8px;
    .card-title {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 16px;
    }
    .tab-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      .tab-item {
        flex: none;
        width: 22%;
        display: flex;
        flex-direction: column;
        text-align: center;
        line-height: 1;
        padding: 3px 0 8px;
        background-color: #292a4d;
        color: #fff;

        span {
          margin-top: 5px;
          &:nth-child(1) {
            font-size: 16px;
          }
        }
      }
    }
    .conent-list {
      margin-bottom: 16px;
    }
  }

  .tab-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 12px 0;
    .tab-nav-item {
      width: 30%;
      flex: none;
      color: #fff;
      font-size: 14px;
      padding: 6px 0 8px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #456de6;
      display: flex;
      flex-direction: column;
      &.overdue {
        color: #f5a623;
        border: 1px solid #f5a623;
      }
      &.active {
        color: #fff;
        background: #456de6;
        border: 1px solid #456de6;
        &.overdue {
          color: #fff;
          background: #f5a623;
          border: 1px solid #f5a623;
        }
      }
    }
  }
}
.back-text {
  font-size: 16px;
}
.not-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
.safety-check .fixed_dep_box {
  color: #515a6e;
  max-width: 190px;
  .btn_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 28px;
    .department_select {
      position: relative;
      width: 100%;
      border-radius: 2px;
      transition: background 0.3s ease-in-out;
      .department_name {
        padding: 5px 9px;
        padding-right: 30px;
        color: #fff;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align-last: left;
      }
      .selece_icon {
        position: absolute;
        top: 50%;
        right: 8px;
        margin-top: -6px;
        transition: transform 0.3s ease-in-out;
        transform-origin: 50% 50%;
      }
    }
    .dep_box {
      position: fixed;
      top: 40px;
      left: 16px;
      right: 16px;
      bottom: -255px;
      padding-right: 16px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 4px;
      height: 250px;
      overflow-y: scroll;
      z-index: 9999999;
      -webkit-overflow-scrolling: touch;
    }
    .toggle {
      outline: none;
      border: none;
      background: inherit;
      font-size: 14px;
      color: #fff;
      .btn_icon {
        margin-top: -5px;
      }
    }
  }
}
</style>
